<template>
  <div class="app-container">
    <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
      @reset-click="handleResetClick" />
    <PageContent ref="contentRef" :gridOptions="gridOptions" :content-config="contentConfig" @addClick="handleAddClick"
      @edit-click="handleEditClick" @export-click="handleExportClick" @toolbarClick="handleToolbarClick"
      @operat-click="handleOperatClick">
      <template #status="scope">
        <el-tag :type="statusType[scope.row[scope.prop]]">
          {{ $t(`rechargeStatus.${scope.row[scope.prop]}`) }}
        </el-tag>
      </template>
      <template #tool="scope">
        <template v-if="['pending'].includes(scope.row.status)">
          <el-button size="small" type="success" link @click="toolClick('complete',scope)">
            {{$t('oper.9')}}
          </el-button>
          <el-button size="small" type="danger" link @click="toolClick('reject',scope)">
            {{$t('oper.5')}}
          </el-button>
        </template>
      </template>
    </PageContent>
    <!-- 编辑 -->
    <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
      <template #provider_id="scope">
        <el-select v-model="param[scope.prop]" @change="changeAdd(param)">
          <template v-for="option in supList" :key="option.id">
            <el-option :label="option.name" :value="option.id" />
          </template>
        </el-select>
      </template>
    </page-modal>
  </div>
</template>

<script setup>
import searchConfig from "./config/search";
import contentConfig from "./config/content";
import usePage from "@/hooks/usePage";
import { onMounted } from "vue";
import Api from '@/api/finance/recharge'
import { tableHeightAutoAdjust } from '@/utils/common'
defineOptions({
  name: "financeRecharge",
  inheritAttrs: false,
});
const { t } = useI18n();
const statusType = {
  "pending": "primary",
  "completed": "success",
  "rejected": "danger",
}

const gridOptions = reactive({})

const { searchRef, contentRef, addModalRef, editModalRef,
  handleQueryClick, handleResetClick, handleAddClick,
  handleSubmitClick, handleExportClick, } = usePage();
const handleEditClick = (row) => {
  // 模拟根据id获取数据进行填充
  editModalRef.value?.setModalVisible(row);
}
const logInfoRef = ref(null)
const handleOperatClick = (obj) => {
  if (obj.name === "details") {
    logInfoRef.value.show(obj.row.id)
  }
}
const toolClick = (type, { row }) => {
  if (type === 'approve') {
    approveFn(row.id)
  } else if (type === 'deny') {
    denyFn(row.id)
  } else if (type === 'complete') {
    completeFn(row.id)
  } else if (type === 'reject') {
    rejectFn(row.id)
  }


}
const completeFn = (id) => {
  ElMessageBox.confirm(t('hint.90'), t('hint.1'), { type: 'warning', }).then(() => {
    Api.complete(id).then(s => {
      ElMessage({
        type: 'success',
        message: t('hint.10'),
      })
      handleQueryClick()
    })
  })
}
const rejectFn = (id) => {
  ElMessageBox.confirm(t('hint.9'), t('hint.1'), { type: 'warning', }).then(() => {
    Api.reject(id).then(s => {
      ElMessage({
        type: 'success',
        message: t('hint.11'),
      })
      handleQueryClick()
    })
  })
}
const approveFn = (id) => {
  ElMessageBox.confirm(t('hint.8'), t('hint.1'), { type: 'warning', }).then(() => {
    Api.approve(id).then(s => {
      ElMessage({
        type: 'success',
        message: t('hint.10'),
      })
      handleQueryClick()
    })
  })
}
const denyFn = (id) => {
  ElMessageBox.confirm(t('hint.9'), t('hint.1'), { type: 'warning', }).then(() => {
    Api.deny(id).then(s => {
      ElMessage({
        type: 'success',
        message: t('hint.11'),
      })
      handleQueryClick()
    })
  })
}
onMounted(() => {
  // 确保在组件挂载后立即设置高度
  tableHeightAutoAdjust(gridOptions);
})
</script>

<style></style>